<template>
  <div class="subscribe">
    <div class="time-box">
      <p>充电时长</p>
      <div class="time"><span>{{ hour }}</span>:<span>{{ minute }}</span>:<span>{{ second }}</span></div>
    </div>
    <div class="charge-info">
      <div class="item">
        <div class="item-left">充电桩编号：</div>
        <div class="item-right">{{ chargePile }}</div>
      </div>
      <div class="item">
        <div class="item-left">地址</div>
        <div class="item-right">北京市昌平区南口镇充电站</div>
      </div>
      <div class="item">
        <div class="item-left">充电桩类型：</div>
        <div class="item-right">60KWH</div>
      </div>
      <div class="item">
        <div class="item-left">预约时间</div>
        <div class="item-right">2021-9-16 17:00:00</div>
      </div>
      <div class="item">
        <div class="item-left">结束时间</div>
        <div class="item-right">2021-9-16 17:00:00</div>
      </div>
    </div>
    <div class="btn" @click="cancel">取消预约</div>
    <div class="btn" >延长预约时间</div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
    data() {
        return {
        hour: '00',
        minute: '00',
        ms: '00',
        second: '00', //秒
        time: "",
        str: "",
        chargePile: new Date().getTime()
        };
    },
    methods: {
        cancel() {
            Dialog.confirm({
                title: '标题',
                message: '你确定要取消预约吗',
                })
                .then(() => {
                    // on confirm
                })
                .catch(() => {
                    // on cancel
                });
            }
    },
};
</script>

<style lang="sass" scoped>
.subscribe
    width: 100%
    .time-box
        margin-top: .8rem
        text-align: center
        p
            font-size: .24rem
        .time
            margin-top: .3rem
            font-size: .56rem
            font-weight: bold
    .charge-info
        width: 7rem
        margin: .5rem auto 0
        padding: .3rem
        box-sizing: border-box
        border: 1px solid #cdcdcd
        border-radius: 10px
        .item
            display: flex
            justify-content: space-between
            line-height: .6rem
            font-size: .28rem
    .btn
        width: 6rem
        height: .8rem
        margin: .3rem auto 0
        text-align: center
        line-height: .8rem
        background: #666
        color: #fff
</style>

